<template>
    <view class="charts-box">
        <qiun-data-charts
            :canvas2d="true"
            type="pie"
            :opts="opts"
            :chartData="chartOption"
        />
    </view>
</template>

<script>

export default {
    props: {
        chartData: {
            type: Object,
            default() {
                return {};
            }
        }
    },
    data() {
        return {
            chartOption: {},
            opts: {
                color: ["#1890FF","#ee6666","#91CB74","#FAC858","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
                padding: [5,5,5,5],
                enableScroll: false,
                extra: {
                    pie: {
                        activeOpacity: 0.5,
                        activeRadius: 10,
                        offsetAngle: 0,
                        labelWidth: 15,
                        border: true,
                        borderWidth: 0,
                        borderColor: "#FFFFFF",
                        color: '#fff',
                        textColor: '#fff'
                    }
                },
                legend: {
                    show: true,
                    fontColor: '#e8eaec'
                }
            }
        };
    },
    onReady() {
    },
    methods: {
        updateChartData() {
            let option = {
                series: [
                    {
                        color: '#fff',
                        textColor: '#fff',
                        data: [
                            {"name":"今日产量",textColor: '#e8eaec',"value": this.chartData.totalShiftQty || 0},
                            {"name":"当班产量",textColor: '#e8eaec',"value": this.chartData.shiftQty || 0},
                        ]
                    }
                ]
            };
            this.chartOption = JSON.parse(JSON.stringify(option));
        }
    },
    watch: {
        chartData: {
            handler() {
                this.updateChartData();
            },
            deep: true
        }
    }
};
</script>

<style scoped>
/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
.charts-box {
    width: 100%;
    height: 100%;
}
</style>
